<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
			<u-cell-group class="list" :border="false">
				<u-swipe-action :options="options" v-for="(item, index) in list" :key="item.ProblemId" :index="index"
					@click="optionsClick">
					<u-cell :arrow="true" @click="gotoCard(`?status=${$GC.STATUS.browse}&ProblemId=${item.ProblemId}`)">
						<text slot="title">{{ item.ProblemTitle || item.ProblemId }}</text>
						<view class="u-cell-label" slot="label">
							<view class="u-cell-label-item">时间：{{ $u.timeFormat(item.ProblemCreDate, 'yyyy-mm-dd') }}</view>
							<view class="u-cell-label-item">审批时点：{{ item.ProblemStatus }}</view>
						</view>
					</u-cell>
				</u-swipe-action>
			</u-cell-group>
			<view class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</scroll-view>

		<!-- 右下角悬浮按钮 -->
		<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			@fabClick="gotoCard(`?status=${$GC.STATUS.add}`)" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 右下角按钮 start
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#fff',
					buttonColor: '#fff',
					iconColor: '#007AFF'
				},
				// 右下角按钮 end

				keywords: '',
				query: {
					flowType: '1',
					pageIndex: 1,
					pageSize: 10
				},
				list: [],
				count: 0,
				loadStatus: 'loadmore',
				options: [{
						text: '上传',
						style: {
							background: '#414ee0'
						}
					},
					{
						text: '删除',
						style: {
							background: '#dd524d'
						}
					}
				]
			};
		},
		onLoad(params) {
			// this.loadList();
		},
		onShow() {
			this.list = [];
			this.loadList();

			if (uni.getStorageSync('refreshList') === true) {
				uni.removeStorageSync('refreshList');
				this.search('');
			}
		},
		onBackPress(options) {},
		methods: {
			gotoCard(param) {
				uni.navigateTo({
					url: '../card/card' + param
				});
			},
			loadMore() {
				this.loadStatus = 'loading';
				setTimeout(() => {
					this.query.pageIndex += 1;
					this.loadList();
				}, 100);
			},
			async loadList() {
				let queryParam = this.query;
				this.$api
					.queryProblemList(queryParam)
					.then((res) => {
						if (!res.data || res.data.length == 0) {
							this.loadStatus = 'nomore';
							return;
						}

						if (res.success) {
							this.list = this.list.concat(res.data);
							let pageInfo = res.pageInfo;

							this.count = pageInfo.totalSize;
							this.query.pageIndex = pageInfo.pageIndex;
							this.query.pageSize = pageInfo.pageSize;

							if (this.query.pageIndex == pageInfo.totalPage) {
								this.loadStatus = 'nomore';
							} else {
								this.loadStatus = 'loadmore';
							}
						}
					})
					.catch((error) => {});
			},
			optionsClick(rowIndex, btnIndex) {
				let self = this,
					row = self.list[rowIndex];
				if (btnIndex == 0) {
					this.navTo('formUpload?id=' + row.id);
				} else if (btnIndex == 1) {
					uni.showModal({
						title: '提示',
						content: '确认要删除该数据吗？',
						showCancel: true,
						success: function(res2) {
							if (res2.confirm) {
								self.$u.api.testData.delete({
									id: row.id
								}).then((res) => {
									self.$u.toast(res.message);
									if (res.result == 'true') {
										self.list.splice(rowIndex, 1);
									}
								});
							}
						}
					});
				}
			},
			search(value) {
				this.list = [];
				this.query.pageIndex = 1;
				this.query.keywords = value;
				this.loadList();
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>
<style lang="scss">
	.u-cell-label {
		margin-top: 6px;
		display: flex;
		gap: 10px;
		// justify-content: space-between;
	}
	.u-cell-label-item {
		text-align: center;
		font-size: 12px;
		background-color: #5ac725;
		border-radius: 6px;
		opacity: 1;
		width: auto;
		padding: 0px 5px;
		color: white;
	}
</style>